<template>
	<view>
		<u-navbar background="#F8F8F8" :is-back="false" :border-bottom="false">
			<view :style="menu">
				<u-tabs bgColor="#F8F8F8" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
		</u-navbar>

		<view class="main">
			<card-list v-for="(item, index) in config" :key="index" :config="item"></card-list>
			<u-loadmore :status="status" icon-type="flower" :load-text="loadText" />
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	let skip = 0
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				config: [],
				status: 'loadmore',
				current: 0,
				loadText: {
					loadmore: '没有内容',
					loading: '努力加载中',
					nomore: '没有更多了',
				},
				menu: {},
				list: [{
					name: '推荐',
					tempId: 0
				}, {
					name: '表白',
					tempId: 2
				}, {
					name: '党政',
					tempId: 3
				}, {
					name: '其他',
					tempId: 4
				}],
			}
		},
		onLoad() {
			const menu = uni.getMenuButtonBoundingClientRect()
			this.menu = `width: ${menu.left}px`
			this.status = 'loading'
			this.getTemplate()
		},
		onReachBottom() {
			if (this.status == "loading") {
				skip += 10
				this.getTemplate()
			} else {
				this.status = "nomore"
			}
		},
		methods: {
			change(index) {
				this.config = []
				skip = 0
				this.status = 'loading'
				this.current = index
				this.getTemplate()
			},
			getTemplate() {
				wx.cloud.callFunction({
					name: "getTemplate",
					data: {
						skip,
						tempId: this.current,
						is_template: true,
						action: 'getTemplist'
					},
					success: res => {
						this.config.push(...res.result.data)
						this.$u.toast(`获取到${res.result.data.length}条`)
						if (res.result.data.length == 0 || res.result.data.length < 10) {
							this.status = 'nomore'
						} else {
							this.status = "loading"
						}
					},
					fail: err => console.log('getTemplist错误', err)
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #F8F8F8;
		overflow: scroll !important;
	}

	.main {
		margin: 0 20rpx;
	}
</style>
